<template>
  <div class="lm-item">
    <div class="lm-name" @click="$goPage(list[0].path)">{{ lmName }}</div>
    <template v-for="(item, index) in list">
      <div class="news-item" v-if="index === 0">
        <!--        :style="{'background-image': `url('${item.imgUrl}')`}"-->
        <div class="news-img scale-view"
             @click.stop="$goDetail(item.id)">
          <img
            :src="item.imgUrl"
            :alt="item.title"
          />
        </div>
        <div class="news-title">
          <div @click.stop="$goDetail(item.id)">{{ item.title }}</div>
        </div>
      </div>
      <div class="news-item two" v-else>
        <div class="news-text one-height" @click.stop="$goDetail(item.id)">
          {{ item.title }}
        </div>
      </div>
    </template>
    <div class="lm-more" @click.stop="$goPage(list[0].path)">{{ $t('more') }} ></div>
  </div>
</template>

<script>
export default {
  name: 'goTop',
  props: {
    lmName: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.xi  .lm-item:nth-child(1) {
  .news-item:nth-last-child(2) {
    display: none;
  }

  .news-text.one-height {
    height: auto;
    overflow: auto;
  }
}

.h5 .lm-item .news-item .news-img {
  max-height: max-content;
}

.lm-item {
  position: relative;
  width: fw(360vw, pc);
  margin-right: auto;
  background-color: #f6f6f6;

  .lm-name {
    font-size: fh(24vh, pc);
    font-weight: bold;
    color: $zh;
    line-height: fh(36vh, pc);
    text-align: center;
    padding: fh(18vh, pc) 0;

    &:hover {
      color: $zh;
      opacity: 0.8;
      cursor: pointer;
    }
  }

  .news-item {
    color: $sh;

    .news-img {
      width: 100%;
      max-height: fh(250vh, pc);
      overflow: hidden;
      background-size: cover;

      img {
        width: 100%;
        //  //min-height: fh(250vh, pc);
      }
    }

    .news-title {
      font-size: fh(20vh, pc);
      line-height: fh(30vh, pc);
      height: fh(122vh, pc);
      padding: fh(16vh, pc) fw(20vw, pc);
      overflow: hidden;
      display: -webkit-box;
      font-weight: 600;
      // 下面这句用来控制行数
      line-clamp: 3;
      -webkit-line-clamp: 3;
      // -webkit-box-orient: vertical;
      border-bottom: 2px solid #d8dcdd;

      > div {
        overflow: hidden;

        &:hover {
          opacity: 0.8;
          cursor: pointer;
          color: $zh;
        }
      }
    }

    &.two {
      padding: 0 fw(20vw, pc);
    }

    .news-text {
      width: 100%;
      margin-top: fh(16vh, pc);
      padding-bottom: fh(2vh, pc);
      font-size: fh(14vh, pc);
      line-height: fh(20vh, pc);
      height: fh(21vh, pc);
      overflow: hidden;
      // white-space: nowrap;
      font-weight: 600;

      &:hover {
        color: $zh;
        opacity: 0.8;
        cursor: pointer;
      }
    }
  }

  .lm-more {
    position: absolute;
    right: fw(20vw, pc);
    bottom: fh(14vh, pc);
    color: #686a67;
    font-size: fh(14vh, pc);

    &:hover {
      color: $zh;
      opacity: 0.8;
      cursor: pointer;
    }
  }
}

.h5 .lm-item {
  width: 100%;
  margin-bottom: fh(20vh, h5);
  padding-bottom: fh(40vh, h5);

  .news-title {
    padding: fh(10vh, h5) fw(10vw, h5);
  }

  .news-item .news-text {
    padding: 0 fw(10vw, h5);
    font-size: fh(14vh, h5);
  }
}
</style>
